Basics
Introduction to CSS
- What is CSS?
- CSS syntax and structure
- Including CSS in HTML (inline, internal, external)
Selectors and Properties
- Basic selectors (element, class, ID)
- Attribute selectors
- Combinator selectors (descendant, child, sibling)
Text and Font Styling
- Text properties (color, alignment, decoration)
- Font properties (family, size, weight, style)
- Line height and letter spacing
Colors and Backgrounds
- Color values (name, HEX, RGB, HSL)
- Background properties (color, image, position, size)
- Gradients (linear, radial)
Intermediate
Box Model
- Understanding the box model
- Margins, borders, padding
- Width and height properties
Positioning
- Static, relative, absolute, fixed, and sticky positioning
- z-index and stacking context
- Float and clear properties
Flexbox
- Introduction to Flexbox
- Flex container properties (display, flex-direction, flex-wrap, justify-content, align-items, align-content)
- Flex item properties (order, flex-grow, flex-shrink, flex-basis, align-self)
CSS Grid
- Introduction to CSS Grid
- Grid container properties (display, grid-template-columns, grid-template-rows, grid-gap)
- Grid item properties (grid-column, grid-row, grid-area)
Advanced
Responsive Design
- Introduction to responsive design
- Media queries
- Responsive units (percentages, viewport units)
- Responsive images and videos
Transitions and Animations
- CSS transitions
- CSS animations (keyframes, animation properties)
- Transformations (translate, rotate, scale, skew)
Advanced Selectors
- Pseudo-classes (hover, focus, nth-child)
- Pseudo-elements (before, after, first-letter, first-line)
- Attribute selectors
CSS Variables and Custom Properties
- Introduction to CSS variables
- Defining and using custom properties
- Variable scope and inheritance